<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析 - 脊柱健康监测系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header .subtitle {
            font-size: 1.2em;
            opacity: 0.9;
            margin-bottom: 20px;
        }

        .nav {
            background: #34495e;
            padding: 0;
        }

        .nav-list {
            display: flex;
            list-style: none;
            justify-content: center;
            flex-wrap: wrap;
        }

        .nav-item {
            margin: 0;
        }

        .nav-link {
            display: block;
            color: white;
            text-decoration: none;
            padding: 15px 25px;
            transition: background 0.3s ease;
            border-radius: 0;
        }

        .nav-link:hover {
            background: #3498db;
        }

        .nav-link.active {
            background: #e74c3c;
        }

        .content {
            padding: 40px 30px;
        }

        .analysis-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .overview-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .overview-card .icon {
            font-size: 2.5em;
            margin-bottom: 15px;
        }

        .overview-card .value {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .overview-card .label {
            font-size: 1em;
            opacity: 0.9;
        }

        .chart-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .chart-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 25px;
            text-align: center;
        }

        .chart-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .chart-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }

        .chart-placeholder {
            height: 250px;
            background: #e9ecef;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
            font-size: 1.1em;
            border: 2px dashed #bdc3c7;
            margin-bottom: 15px;
        }

        .chart-description {
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .data-table {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .table-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 25px;
            text-align: center;
        }

        .table-container {
            overflow-x: auto;
        }

        .data-table table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .data-table th,
        .data-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }

        .data-table th {
            background: #f8f9fa;
            color: #2c3e50;
            font-weight: 600;
        }

        .data-table tr:hover {
            background: #f8f9fa;
        }

        .trend-indicator {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: bold;
        }

        .trend-up {
            background: #d5f4e6;
            color: #27ae60;
        }

        .trend-down {
            background: #fadbd8;
            color: #e74c3c;
        }

        .trend-stable {
            background: #fef9e7;
            color: #f39c12;
        }

        .insights-section {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
        }

        .insights-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 25px;
            text-align: center;
        }

        .insights-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .insight-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .insight-card h4 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        .insight-card p {
            color: #7f8c8d;
            font-size: 0.9em;
            line-height: 1.5;
        }

        .recommendations-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .recommendations-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 25px;
            text-align: center;
        }

        .recommendation-list {
            display: grid;
            gap: 15px;
        }

        .recommendation-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            border-left: 4px solid #3498db;
        }

        .recommendation-item h4 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .recommendation-item p {
            color: #7f8c8d;
            margin-bottom: 10px;
        }

        .recommendation-priority {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: bold;
        }

        .priority-high {
            background: #fadbd8;
            color: #e74c3c;
        }

        .priority-medium {
            background: #fef9e7;
            color: #f39c12;
        }

        .priority-low {
            background: #d5f4e6;
            color: #27ae60;
        }

        .export-section {
            background: #2c3e50;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            margin-top: 30px;
        }

        .export-title {
            color: white;
            font-size: 1.5em;
            margin-bottom: 20px;
        }

        .export-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #2980b9 0%, #1f5f8b 100%);
            transform: translateY(-2px);
        }

        .btn-success {
            background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
            color: white;
        }

        .btn-success:hover {
            background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
            transform: translateY(-2px);
        }

        .btn-warning {
            background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
            color: white;
        }

        .btn-warning:hover {
            background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
            transform: translateY(-2px);
        }

        .footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 50px;
        }

        @media (max-width: 768px) {
            .content {
                padding: 20px 15px;
            }
            
            .nav-list {
                flex-direction: column;
            }
            
            .chart-container {
                grid-template-columns: 1fr;
            }
            
            .export-buttons {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>📈 数据分析</h1>
            <p class="subtitle">智能数据分析与健康报告</p>
        </header>

        <nav class="nav">
            <ul class="nav-list">
                <li class="nav-item"><a href="index.html" class="nav-link">🏠 首页</a></li>
                <li class="nav-item"><a href="posture-detection.html" class="nav-link">📷 姿势识别</a></li>
                <li class="nav-item"><a href="rehabilitation.html" class="nav-link">🏃 康复训练</a></li>
                <li class="nav-item"><a href="pain-record.html" class="nav-link">📊 疼痛记录</a></li>
                <li class="nav-item"><a href="data-analysis.html" class="nav-link active">📈 数据分析</a></li>
                <li class="nav-item"><a href="doctor-portal.html" class="nav-link">👨‍⚕️ 医护端</a></li>
            </ul>
        </nav>

        <main class="content">
            <div class="analysis-overview">
                <div class="overview-card">
                    <div class="icon">📊</div>
                    <div class="value">85</div>
                    <div class="label">平均姿势评分</div>
                </div>
                <div class="overview-card">
                    <div class="icon">📉</div>
                    <div class="value">-15%</div>
                    <div class="label">疼痛改善</div>
                </div>
                <div class="overview-card">
                    <div class="icon">🏃</div>
                    <div class="value">85%</div>
                    <div class="label">训练完成率</div>
                </div>
                <div class="overview-card">
                    <div class="icon">📅</div>
                    <div class="value">30</div>
                    <div class="label">数据记录天数</div>
                </div>
            </div>

            <div class="chart-section">
                <h2 class="chart-title">📊 健康数据趋势</h2>
                <div class="chart-container">
                    <div class="chart-item">
                        <div class="chart-placeholder">
                            <div>
                                <div style="font-size: 3em; margin-bottom: 10px;">📈</div>
                                <div>姿势评分趋势</div>
                            </div>
                        </div>
                        <div class="chart-description">过去30天的姿势评分变化趋势</div>
                    </div>
                    <div class="chart-item">
                        <div class="chart-placeholder">
                            <div>
                                <div style="font-size: 3em; margin-bottom: 10px;">📉</div>
                                <div>疼痛等级趋势</div>
                            </div>
                        </div>
                        <div class="chart-description">疼痛等级随时间的变化情况</div>
                    </div>
                    <div class="chart-item">
                        <div class="chart-placeholder">
                            <div>
                                <div style="font-size: 3em; margin-bottom: 10px;">🏃</div>
                                <div>训练完成情况</div>
                            </div>
                        </div>
                        <div class="chart-description">康复训练完成率统计</div>
                    </div>
                    <div class="chart-item">
                        <div class="chart-placeholder">
                            <div>
                                <div style="font-size: 3em; margin-bottom: 10px;">🎯</div>
                                <div>健康目标达成</div>
                            </div>
                        </div>
                        <div class="chart-description">各项健康指标的达成情况</div>
                    </div>
                </div>
            </div>

            <div class="data-table">
                <h2 class="table-title">📋 详细数据统计</h2>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>指标</th>
                                <th>本周</th>
                                <th>上周</th>
                                <th>变化趋势</th>
                                <th>目标值</th>
                                <th>达成率</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>平均姿势评分</td>
                                <td>85分</td>
                                <td>82分</td>
                                <td><span class="trend-indicator trend-up">↗ +3.7%</span></td>
                                <td>90分</td>
                                <td>94%</td>
                            </tr>
                            <tr>
                                <td>疼痛等级</td>
                                <td>2.1</td>
                                <td>2.5</td>
                                <td><span class="trend-indicator trend-down">↘ -16%</span></td>
                                <td>1.0</td>
                                <td>52%</td>
                            </tr>
                            <tr>
                                <td>训练完成次数</td>
                                <td>15次</td>
                                <td>12次</td>
                                <td><span class="trend-indicator trend-up">↗ +25%</span></td>
                                <td>20次</td>
                                <td>75%</td>
                            </tr>
                            <tr>
                                <td>训练时长</td>
                                <td>120分钟</td>
                                <td>95分钟</td>
                                <td><span class="trend-indicator trend-up">↗ +26%</span></td>
                                <td>150分钟</td>
                                <td>80%</td>
                            </tr>
                            <tr>
                                <td>连续使用天数</td>
                                <td>7天</td>
                                <td>5天</td>
                                <td><span class="trend-indicator trend-up">↗ +40%</span></td>
                                <td>30天</td>
                                <td>23%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="insights-section">
                <h2 class="insights-title">💡 智能分析洞察</h2>
                <div class="insights-grid">
                    <div class="insight-card">
                        <h4>🎯 姿势改善显著</h4>
                        <p>您的姿势评分在过去一周提升了3.7%，主要得益于持续的姿势检测和纠正训练。建议继续保持良好的坐姿习惯。</p>
                    </div>
                    <div class="insight-card">
                        <h4>📉 疼痛明显缓解</h4>
                        <p>疼痛等级从2.5降至2.1，下降了16%，说明康复训练和姿势改善起到了积极作用。建议继续坚持训练计划。</p>
                    </div>
                    <div class="insight-card">
                        <h4>🏃 训练积极性高</h4>
                        <p>训练完成次数和时长都有显著提升，显示出您对康复训练的积极态度。建议保持这种良好的训练节奏。</p>
                    </div>
                    <div class="insight-card">
                        <h4>⏰ 使用习惯良好</h4>
                        <p>连续使用天数达到7天，说明您已经养成了良好的健康管理习惯。建议继续保持这种规律的使用模式。</p>
                    </div>
                </div>
            </div>

            <div class="recommendations-section">
                <h2 class="recommendations-title">🎯 个性化建议</h2>
                <div class="recommendation-list">
                    <div class="recommendation-item">
                        <h4>增加腰部核心训练</h4>
                        <p>根据数据分析，您的腰部疼痛仍有改善空间。建议增加腰部核心训练，每周至少3次，每次15-20分钟。</p>
                        <span class="recommendation-priority priority-high">高优先级</span>
                    </div>
                    <div class="recommendation-item">
                        <h4>优化工作环境</h4>
                        <p>建议调整工作台高度和显示器位置，确保坐姿时背部挺直，双脚平放在地面上，减少长时间不良姿势的影响。</p>
                        <span class="recommendation-priority priority-medium">中优先级</span>
                    </div>
                    <div class="recommendation-item">
                        <h4>增加休息频率</h4>
                        <p>建议每工作1小时起身活动5-10分钟，进行简单的拉伸运动，缓解肌肉紧张，预防姿势性疼痛。</p>
                        <span class="recommendation-priority priority-medium">中优先级</span>
                    </div>
                    <div class="recommendation-item">
                        <h4>保持训练节奏</h4>
                        <p>继续保持当前的训练频率和强度，预计在2-3周内疼痛等级可降至1.5以下，姿势评分可达到90分以上。</p>
                        <span class="recommendation-priority priority-low">低优先级</span>
                    </div>
                </div>
            </div>

            <div class="export-section">
                <h2 class="export-title">📤 数据导出与分享</h2>
                <p style="color: #bdc3c7; margin-bottom: 25px;">将您的健康数据导出为报告，与医生分享或保存备份</p>
                <div class="export-buttons">
                    <button class="btn btn-primary" onclick="exportPDF()">📄 导出PDF报告</button>
                    <button class="btn btn-success" onclick="exportExcel()">📊 导出Excel数据</button>
                    <button class="btn btn-warning" onclick="shareData()">📤 分享给医生</button>
                </div>
            </div>
        </main>

        <footer class="footer">
            <p>&copy; 2024 脊柱健康监测与康复指导系统 | 智能健康管理平台</p>
        </footer>
    </div>

    <script>
        function exportPDF() {
            alert('正在生成PDF报告...\n报告将包含您的健康数据分析、趋势图表和个性化建议');
        }

        function exportExcel() {
            alert('正在导出Excel数据...\n包含详细的健康指标数据和统计信息');
        }

        function shareData() {
            alert('正在准备数据分享...\n您可以将健康报告发送给您的医生进行远程咨询');
        }
    </script>
</body>
</html>
